<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>朝看新闻后台管理-layui</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" >
    <script th:src="@{/static/layui/layui.js}"></script>
    <script th:src="@{'/static/js/jquery-3.js'}"></script>
</head>
<body class="layui-layout-body">

    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo"> 朝看新闻后台 </div>
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="#">控制台</a></li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;" >
                        <!--th:src="${( userExt.userPic != null && !#strings.isEmpty(userExt.userPic)) ? userExt.userPic : '@{/system/images/defalutUserPic.jpg}'}" -->
                        <img src="/static/image/timg.jpg" class="layui-nav-img">
                        <i>admin</i>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">基本资料</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href=""><img th:src="@{/static/image/exit.png}" class="layui-nav-img"></a></li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree"  lay-filter="test" th:each="obj,stat:${list}">
                    <!-- 添加  layui-nav-itemed 就会默认展开 -->
                    <li class="layui-nav-item" >
                        <a class="Hui-iconfont" th:id="${stat.index}" href="javascript:;"  th:text="${obj.name}"></a>
                        <dl class="layui-nav-child" th:each="sub,sta:${obj.list}">
                            <dd>
                                <a href="javascript:;" class="subMenu" data-type="tabAdd" th:attr="data-id=${sub.key},data-title=${sub.name},data-url=${'/'+sub.url}">[[${sub.name}]]</a>
                            </dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 2px;" class="layui-tab" lay-filter="demo" lay-allowclose="true">
                <ul class="layui-tab-title">
                </ul>
                <div class="layui-tab-content">
                </div>
            </div>
        </div>
        <!--<div class="layui-footer" th:text="${'©www.jyJava.com 版权所有：' + systemName }">
            &lt;!&ndash; 底部固定区域 &ndash;&gt;

        </div>-->

    </div>

<script>
    layui.use(['element'],function () {
        var element = layui.element;
        var $ = layui.$;
        $('.subMenu').on('click',function () {
            var object = $(this);
            //判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
            if($(".layui-tab-title li[lay-id]").length <= 0 ){
                action.tabAdd(object.attr("data-url"),object.attr("data-id"),object.attr("data-title"));
            }else {
                var isData = false;//初始化一个标志，为false说明为打开该tab项，为true则说明有
                $.each($(".layui-tab-title li[lay-id]"),function () {
                    //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                    if($(this).attr("lay-id") == object.attr("data-id")){
                        isData = true;
                    }
                });
                if(isData == false){
                    //标志为false 新增一个tab项
                    action.tabAdd(object.attr("data-url"),object.attr("data-id"),object.attr("data-title"));
                }
            }
            //最后不管是否新增tab，最后都转到要打开的选项页面上
            action.tabChange(object.attr("data-id"));
        });

        var action = {
            tabAdd: function (url,id,name) {
                element.tabAdd('demo',{
                    title:name,
                    content:'<iframe data-frameid="'+id+'" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>',
                    id: id
                });
                FrameWH();
            },
            tabChange: function (id) {
                //切换到指定的Tab项
                element.tabChange('demo',id);
            },
            tabDelete: function (id) {
                element.tabDelete('demo',id);
            }

        };
        //计算iframe层的大小
        function FrameWH() {
            var h = $(window).height();
            $("iframe").css("height",h+"px");
        }


    })
</script>

</body>
</html>